{% load i18n static %}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
    <title>{% trans "Stock Data" %}</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 固定表头 */
        th {
            position: sticky;
            top: 0;
            background-color: #f8f9fa; /* 表头背景色 */
            z-index: 1; /* 确保表头在内容之上 */
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        /* 斑马纹效果 */
        tbody tr:nth-child(even) {
            background-color: #f9f9f9; /* 偶数行背景色 */
        }

        /* 悬停效果 */
        tbody tr:hover {
            background-color: #f1f1f1; /* 鼠标悬停时背景色 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>{% trans "Stock Data" %}</h1>

        
        <div style="overflow-y: auto; max-height: 500px;"> <!-- 限制表格高度并添加滚动条 -->
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>{% trans "TS Code" %}</th>
                        <th>{% trans "Trade Date" %}</th>
                        <th>{% trans "Open" %}</th>
                        <th>{% trans "High" %}</th>
                        <th>{% trans "Low" %}</th>
                        <th>{% trans "Close" %}</th>
                        <th>{% trans "Pre Close" %}</th>
                        <th>{% trans "Change" %}</th>
                        <th>{% trans "Pct Chg" %}</th>
                        <th>{% trans "Vol" %}</th>
                        <th>{% trans "Amount" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for stock in page_obj %}
                    <tr>
                        <td>{{ stock.ts_code }}</td>
                        <td>{{ stock.trade_date }}</td>
                        <td>{{ stock.open }}</td>
                        <td>{{ stock.high }}</td>
                        <td>{{ stock.low }}</td>
                        <td>{{ stock.close }}</td>
                        <td>{{ stock.pre_close }}</td>
                        <td>{{ stock.change }}</td>
                        <td>{{ stock.pct_chg }}</td>
                        <td>{{ stock.vol }}</td>
                        <td>{{ stock.amount }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页导航 -->
        <div class="pagination">
            <span class="step-links">
                {% if page_obj.has_previous %}
                    <a href="?page=1">{% trans "first" %}</a>
                    <a href="?page={{ page_obj.previous_page_number }}">{% trans "previous" %}</a>
                {% endif %}

                <span class="current">
                    {% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}.
                </span>

                {% if page_obj.has_next %}
                    <a href="?page={{ page_obj.next_page_number }}">{% trans "next" %}</a>
                    <a href="?page={{ page_obj.paginator.num_pages }}">{% trans "last" %}</a>
                {% endif %}
            </span>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

